<template>
	<view class="app" @click="hidesearchrouter">
		<view class='search-box'>
		  	<button class="search-btn" @click="searchSubmit" >搜索</button>
		    <view class='search'>
		        <view class='search-icon'><image src="/static/search_icon.png" mode="aspectFill"></image></view>
		        <input type='search' class='search-text' placeholder-class='placeholder' @input="Searchblur" placeholder='选择小区、学校、写字楼' v-model="keyword"  ></input>
		    </view>
		</view>
		<cover-view class="searchrouter" v-if="Searchblurbool">
			<cover-view class="item" v-for="(item, index) in searchrouter" :key="index" @click="toaddress(item.name)"">
				<cover-image class="icon" src="/static/adress-icon3.png"></cover-image>
				<cover-view class="p">{{item.name}}</cover-view>
			</cover-view>
		</cover-view>

		<view class="map" v-if="!isloading">
			<map style="width:100%;height:100%;" id="map" :longitude="longitude" :latitude="latitude" scale="18" show-location="true" :markers="markers" @markertap="makertap"  @regionchange="regionchange"></map>  
		</view>

		<cover-view class="searchlists" v-if="!isloading && searchlists.length>0" :scroll-top="scrollTop">
			<cover-view class="item" v-for="(item, index) in searchlists" :key="index" :class="current==index?'on':''" @click="goaddress(item)">
				<cover-view class="t">{{item.name}}</cover-view>
				<!-- <cover-view class="distant">{{item.distance}}</cover-view> -->
				<cover-view class="line" v-if="key<(searchlists.length-1)"></cover-view>
				<cover-view class="c">
					<cover-image class="icon" v-if="current==key" src="/static/adress-icon3-hover.png"></cover-image>
					<cover-image class="icon" v-else src="/static/adress-icon3.png"></cover-image>
					<cover-view class="p">{{item.address}}</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="more"><cover-view class="line2"></cover-view><cover-view class="text"> 亲，到底了哦 </cover-view></cover-view>
		</cover-view>

		<!-- <view class="empty-page" v-if="!isloading && searchlists.length<=0">
		    <view class="empty-content">
		        <image class="icon03" src="/static/address-empty.png"></image>
		        <view class="t2">亲，附近没有搜索结果</view>
		        <view class="d2">换个词试试呗~</view>
		    </view>
		</view> -->
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	// import amapFile from "@/components/amap-wx.js";
	import QQMapWX from "@/components/qqmap-wx-jssdk.min.js";
	var qqmapsdk;
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				keyword: ' ', //搜索关键词
		        latitude: 0,
		        longitude: 0,
		        searchrouter: [],
		        searchlists: [],
		        Searchblurbool: false,
		        isloading: true,
		        tolatitude: '',
		        tolongitude: '',
		        markers: [],
		        navHeight:0,
		        current:0,
		        scrollTop:0,
		        city:'',
		        key:'YJ5BZ-5F7AI-MVIGX-57BXZ-L3ZB5-7HFEJ',
		        
			}
		},
		onLoad(option){
			qqmapsdk = new QQMapWX({
	            key: this.key
	        })
		},
		onShow() {
	
	        this.getposition();
	    },
		computed: {
			
		},
		components:{

		},
		onShareAppMessage: function (e) {
		    var title = '家居大众点评';
		    var imageUrl = 'https://api.zhaimejia.cn/miniStatic/share.jpg';
		    var path= ''
		    
		    let obj = {
		      title,
		      imageUrl,
		      path: path,
		      success: function (res) {
		        console.log('点击页面内的分享按钮--onShareAppMessage分享成功', res)
		      },
		      fail(err) {
		        console.log('点击页面内的分享按钮--onShareAppMessage-fail', err)
		      }
		    }
		    return obj
		  },
		  onShareTimeline: function(res){
		    var title = '家居大众点评';
		    var imageUrl = 'https://api.zhaimejia.cn/miniStatic/share.jpg';
		    var path= ''
		    
		    let obj = {
		      title,
		      imageUrl,
		      path: path,
		      success: function (res) {
		        console.log('点击页面内的分享按钮--onShareAppMessage分享成功', res)
		      },
		      fail(err) {
		        console.log('点击页面内的分享按钮--onShareAppMessage-fail', err)
		      }
		    }
		    return obj
		},
		methods: {
			// h获取默认坐标
		    getposition() {
				var that=this;
			      uni.getLocation({
			        type: 'gcj02',
			        success: function(res) {
			            that.longitude=res.longitude
			            that.latitude=res.latitude
			        },
			        fail: function(err) {
			            
			        },
			        complete: function(res) {
			          uni.getSetting({
			            success: (res) => {
			              let authSetting = res.authSetting
			              if (authSetting['scope.userLocation']) {
			                // 已授权
			              } else {
			                uni.showModal({
			                  title: '是否开启地理位置授权',
			                  content: '',
			                  success: res => {
			                    if (res.confirm) {
			                      uni.openSetting()
			                    }
			                  }
			                })
			              }
			            }
			          })
			          that.getsearchlists()
			        },
			      })
		    },
		    // 关键词输入提示
		    Searchblur(e) {
		        let that = this;
		        let keyword =this.keyword;
		        that.Searchblurbool= true
		        that.keyword=keyword
		        qqmapsdk.getSuggestion({
		          keyword: keyword,
		          // location: (that.longitude+','+that.latitude) || '',
		          region: that.city || '',
		          success: function(res){
		            if(res.data){
		            	that.searchrouter=res.data
		            }
		          }
		        })
		    },
		    //处理搜索事件
		    searchSubmit() {
		        var keyword=this.keyword
		        this.getsearchlists(keyword)
		    },
		    toaddress(e) {
		    	this.keyword=e
		        this.getsearchlists(e)

		    },
		    makertap(e) {
		        var id = e.markerId;
		        var that = this;
		        var markers = [];
		        for(var j = 0; j < this.markers.length; j++){
		          let item=that.markers[j]
		          if(j==id){
		            item.iconPath = "/static/marker_checked.png";
		          }else{
		            item.iconPath = "/static/marker.png";
		          }
		        }

	          that.markers= that.markers
	          that.current=id
	          that.scrollTop=id*70

		    },
		    toKm(value){
				if(value === undefined || value === null){
					return ;
				}
				value=Number(value)
				if(value-1000>0){
					return Number(value/1000).toFixed(1)+'km';
				}else{
					return value.toFixed(0)+'m';
				}
				
			},
			regionchange(e){
				console.log(e)
				if(e.type=="end" && e.causedBy=="drag"){
					this.longitude=e.detail.centerLocation.longitude || '';
					this.latitude=e.detail.centerLocation.latitude || '';
					this.getsearchlists()
				}
			},
		    getsearchlists(key) {
	            this.searchlists=[]
	            this.isloading=true
		        var that=this
				
				qqmapsdk.search({
			      keyword:that.keyword,
			      location: (that.latitude+','+that.longitude) || '',
			      page_size: 20,
      				page_index: 1,
			      success: function (res) { //搜索成功后的回调
			        var mks = []
			        for (var i = 0; i < res.data.length; i++) {
			          mks.push({ // 获取返回结果，放到mks数组中
			            title: res.data[i].title,
			            id: res.data[i].id,
			            latitude: res.data[i].location.lat,
			            longitude: res.data[i].location.lng,
			            iconPath: "/static/marker.png", //图标路径
			            width: 20,
			            height: 20
			          })
			        }
			        that.markers=mks
			        that.searchlists=mks
			        that.isloading=false
			      },
			      fail: function (res) {
			        console.log(res);
			      },
			      complete: function (res){
			        console.log(res);
			        this.isloading=false
			      }
			  });
		        // qqmapsdk.search({
		        //     keyword:key||'',
		        //     location: (that.latitude+','+that.longitude) || '',
		        //     success: function(res){
		        //     	console.log(res)
		        //         for(let item of res.data){
		        //           item.longitude=item.location.lng
		        //           item.latitude=item.location.lat
		        //         }
		        //         var markersData = res.data;
		        //         console.log(markersData)
		        //         var poisData = res.data;
		        //         var markers_new = [];
		        //         markersData.forEach(function(item,index){
		        //           markers_new.push({
		        //           	title: item.title,
				      //       id: item.id,
				      //       latitude: item.location.lat,
				      //       longitude: item.location.lng,
				      //       iconPath: "/static/marker.png", //图标路径
				      //       width: 20,
				      //       height: 20
		        //           })

		        //         })
		        //         if(markersData.length > 0){
	
	         //                that.markers= markers_new
	         //                that.latitude= markersData[0].latitude
	         //                that.longitude= markersData[0].longitude
	                      
	         //                 // for(let item of poisData){
	         //                 // 	item.distance=that.toKm(item.distance)
	         //                 // }
	         
	         //                that.searchlists=poisData

		        //             // if(!that.keyword){
		        //             //        that.keyword=markersData[0].name
		        //             // }
		        //         }

		        //         that.isloading=false


		        //     },
		        //     fail: function(info){

		        //         this.isloading=false
		        //     }
		        // })
		    
		    },
		    goaddress(e) {
		    	console.log(e)
		      if(e){
		        // var pages = getCurrentPages(); // 获取页面栈
		        // var currPage = pages[pages.length - 1]; // 当前页面
		        // var prevPage = pages[pages.length - 2]; // 上一个页面
		        // prevPage.setData({
		        //   coordinates:e
		        // })
		  //       uni.$emit('updateData',{
				// 	coordinates:e
				// }
		      }
		      uni.navigateBack({
		        delta: 1
		      })
		    },
		    hidesearchrouter() {
		    	this.Searchblurbool=false
		    },
		    //点击map
		    poitap(e){
		    	this.keyword=e.detail.name

		        this.getsearchlists(e.detail.name, e.detail.latitude, e.detail.longitude)
		    },
			
		}
	}
</script>

<style lang="scss">
.search-box{  padding: 8upx 32upx 32upx; box-sizing: border-box; width: 100%; background: #fff;border-bottom-left-radius:20upx;border-bottom-right-radius:20upx;}
.searchfix{position: fixed; left: 0; right: 0; top: 0; margin: auto; z-index: 500;}
.search{ position: relative; overflow: hidden; height: 64upx; line-height: 64upx; background: #F8F8F8; border-radius: 32upx; box-sizing: border-box;padding-left: 62upx; }
.search .search-icon{ position: absolute; left:22upx; top: 0; bottom: 0; margin: auto; z-index: 100; width: 28upx; height: 28upx;line-height: 28upx;}
.search .search-icon image{width: 100%; height: 100%;vertical-align: middle;}
.search .search-text{ color:#2F3033; font-size: 28upx; width: 100%; background: none; border:none; line-height: 64upx; height: 64upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.search .placeholder{ color: #ccc;}
.search-btn{ width:124upx;height:64upx;background:none; border:none; border-radius:35upx;margin-left: 20upx; text-align: center;color: #333; font-size: 32upx; line-height: 64upx;float: right;}
.search-btn::after{border: none;}
.search-blank{ height:104upx;}

page{ height: 100%; overflow: hidden; }
.app{ height: 100%; min-height: 1200upx; background-color: #eee;}
.searchrouter{ position: fixed; top:104upx; left: 30upx; right:170upx; max-height: 540upx; box-shadow: rgba(0,0,0,0.1) 0 0 10upx; background: #fff; box-sizing: border-box; z-index: 1000;overflow-y: scroll;border-radius:20upx;}
.searchrouter .item{ font-size: 24upx; color:rgba(47,48,51,0.65); padding:20upx 30upx 20upx 0; position: relative;}
.searchrouter .item .icon{width: 32upx; height: 32upx;float: left;margin-right: 12upx;margin-left: 21upx;}
.searchrouter .item .t{ color: #2F3033; font-size: 28upx;font-weight: 700; margin-left: 63upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.searchrouter .item .p{overflow: hidden;margin-top: 4upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.searchrouter .item .line{background-color: #eee;height: 1px;position: absolute;left: 60upx;bottom: 0;right: 0;z-index: 100;}
.searchroutermask{ background: rgba(255,255,255,0.1); position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 998; }
.map{ position: absolute; z-index: 10; top: 104upx;left: 0;right: 0;bottom: 0;margin: auto; }
.searchlists{background: #fff; position: absolute;z-index:500;left: 0;right: 0;width: 686upx;height: 524upx;margin: auto;bottom: 50upx; box-shadow:0 4upx 40upx rgba(0,0,0,0.04);border-radius:20upx;overflow-y: scroll }
.searchlists .item{ font-size: 24upx; color:rgba(47,48,51,0.65); position: relative; padding:30upx 130upx 30upx 0upx; }
.searchlists .item .t{ color: #2F3033; font-size: 28upx;font-weight: 700; margin-bottom: 10upx; margin-left: 63upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.searchlists .item .icon{width: 32upx; height: 32upx;float: left;margin-right: 12upx;margin-left: 21upx;}
.searchlists .item .distant{position: absolute;z-index: 100;right: 32upx;top: 32upx;color: #2F3033;}
.searchlists .item .p{margin-top: 4upx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.searchlists .item .line{background-color: #eee;height: 1px;position: absolute;left: 60upx;bottom: 0;right: 0;z-index: 100;}

.more{text-align: center;font-size: 24upx;color:#ACB1BB; margin-bottom: 30upx; margin-top: 10upx; position: relative;}
.more .line2{content: '';display: inline-block; background-color: #ACB1BB; height: 1px; width: 50%; right: 0; left: 0; top: 50%; margin: auto; position: absolute; z-index: 100;}
.more .text{ position: relative; z-index: 101; padding: 0 24upx; background: #fff; display: inline-block;}

.empty-page {width: 100%;height: 100%;position: relative;margin: auto;display: flex;align-items: center;justify-content: center;text-align: center;line-height: 1.5;}
.empty-content {color:#8D9099;font-size: 28upx;display: flex;align-items: center;flex-direction: column;justify-content: center;text-align: center;min-height: 400upx;}
.empty-content .icon03 {width: 132upx;height: 132upx;display: block;margin: 0 auto 20upx;}
.empty-content .t2{overflow: hidden;margin-bottom: 10upx;text-align: center;}
.empty-content .d2{text-align: center;}

</style>
